<script type="text/x-template" id="cider-playlist">
    <div class="content-inner playlist-page" :class="classes" :is-album="isAlbum()"
         v-if="data != [] && data.attributes != null"

         :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
        <template v-if="app.playlists.loadingState == 0">
            <div class="content-inner centered">
                <div class="spinner"></div>
            </div>
        </template>
        <template v-if="app.playlists.loadingState == 1">
            <div class="playlist-display" :style="{ 'background-color': '#' +hasHeroObject()?.bgColor ?? '' }"
                 @mouseover.self="minClass(false)">
                <div class="playlistInfo">
                    <div class="playlist-hero" v-if="hasHero()">
                        <mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
                        <div class="hero-tint"
                             :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div>
                    </div>
                    <div class="row">
                        <div class="col-auto cider-flex-center" @mouseover="minClass(false)">
                            <div class="mediaContainer">
                                <mediaitem-artwork
                                        shadow="large"
                                        :video-priority="true"
                                        :url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : ((data.relationships != null && data.relationships.tracks.data.length > 0 && data.relationships.tracks.data[0].attributes != null) ? ((data.relationships.tracks.data[0].attributes.artwork != null)? data.relationships.tracks.data[0].attributes.artwork.url : ''):'')"
                                        :video="(data.attributes != null && data.attributes.editorialVideo != null) ? (data.attributes.editorialVideo.motionDetailSquare ? data.attributes.editorialVideo.motionDetailSquare.video : (data.attributes.editorialVideo.motionSquareVideo1x1 ? data.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                                        size="500"
                                ></mediaitem-artwork>
                            </div>
                        </div>
                        <div class="col playlist-info">
                            <template v-if="!editorialNotesExpanded">
                                <div>
                                    <div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()"
                                         v-show="!nameEditing"
                                         :style="{ 'color': '#' +hasHeroObject()?.textColor1 ?? '', 'filter' : 'drop-shadow(1px 3px 8px #' + hasHeroObject()?.textColor4 ?? '' +')' }">
                                        {{data.attributes ? (data.attributes.name ??
                                        (data.attributes.title ?? '') ?? '') : ''}}
                                    </div>
                                    <div class="playlist-name" @mouseover="minClass(false)" v-show="nameEditing"><input
                                                type="text"
                                                spellcheck="false"
                                                class="nameEdit"
                                                v-model="data.attributes.name"
                                                @blur="editPlaylist"
                                                @change="editPlaylist"
                                                @keydown.enter="editPlaylist" />
                                    </div>
                                    <div class="playlist-time genre" style="margin: 0px;"
                                         :style="{ 'color': '#' + hasHeroObject()?.textColor2 ?? '' }">
                                        {{getAlbumGenre()}}
                                    </div>
                                    <div class="playlist-artist item-navigate"
                                         v-if="getArtistName(data) != '' && !useArtistChip"
                                         @click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
                                        {{getArtistName(data)}}
                                    </div>
                                    <template v-if="useArtistChip">
                                        <artist-chip v-for="artist in data.relationships.artists?.data"
                                                     :style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
                                                     :item="artist"></artist-chip>
                                    </template>
                                    <div class="playlist-desc"
                                         :style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
                                         v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
                                        <div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null"
                                             class="content"
                                             v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
                                             @click="openInfoModal()"></div>
                                        <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing == false)"
                                             @mouseover="minClass(false)" @click="editPlaylistDescription()"
                                             v-html="(data.attributes.description?.standard ?? (data.attributes.editorialNotes?.standard ?? '')).substring(0, 255) +'...'"
                                        ></div>
                                        <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing)"
                                             @mouseover="minClass(false)"><input type="text"
                                                                                 spellcheck="false"
                                                                                 class="descriptionEdit"
                                                                                 v-model="data.attributes.description.standard"
                                                                                 @blur="editPlaylist"
                                                                                 @change="editPlaylist"
                                                                                 @keydown.enter="editPlaylist" /></div>
                                        <!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
                                                @click="editorialNotesExpanded = !editorialNotesExpanded">
                                            {{app.getLz('term.showMore')}}
                                        </button> -->
                                    </div>
                                </div>
                            </template>
                            <template v-if="editorialNotesExpanded">
                                <div class="playlist-desc-expanded">
                                    <div class="content"
                                         v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
                                    <button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">
                                        {{app.getLz('term.showLess')}}
                                    </button>
                                </div>
                            </template>
                            <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}"
                                 style="z-index: 20;">
                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
                                        :style="{'background': '#' +hasHeroObject()?.textColor4 ?? '','border-top': '#' +hasHeroObject()?.textColor3 ?? '','border': '#' +hasHeroObject()?.textColor2 ?? ''}"
                                        @click="app.mk.shuffleMode = 0; play()"><img class="md-ico-play">
                                    {{app.getLz('term.play')}}
                                </button>
                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
                                        :style="{'background': '#' +hasHeroObject()?.textColor4 ?? '','border-top': '#' +hasHeroObject()?.textColor3 ?? '','border': '#' +hasHeroObject()?.textColor2 ?? ''}"
                                        @click="app.mk.shuffleMode = 1;play()"><img class="md-ico-shuffle">
                                    {{app.getLz('term.shuffle')}}
                                </button>
                                <button class="md-btn md-btn-icon" style="min-width: 180px;"
                                        v-if="inLibrary!=null && confirm!=true"
                                        @click="confirmButton()"><img
                                            :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                    {{ (!inLibrary) ? app.getLz('action.addToLibrary') :
                                    app.getLz("action.removeFromLibrary") }}
                                </button>
                                <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
                                        @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
                                    <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                    {{app.getLz('term.confirm')}}
                                </button>
                                <select v-if="shouldPaginate" class="md-select" v-model="prefs.scroll">
                                    <optgroup :label="app.getLz('term.scroll')">
                                        <option value="infinite">{{app.getLz('term.scroll.infinite')}}</option>
                                        <option value="paged">
                                            {{app.getLz('term.scroll.paged').replace("${songsPerPage}", pageSize)}}
                                        </option>
                                    </optgroup>
                                </select>
                                <div style="display: flex; float: right;">
                                    <button :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
                                            :class="['search-btn', showSearch ? 'active' : '']" @click="toggleSearch()"
                                            :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
                                        <svg-icon
                                                :style="{ 'width': '15px', 'background-color': '#' + hasHeroObject()?.bgColor ?? '' }"
                                                :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
                                        </svg-icon>
                                    </button>
                                    <button :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
                                            class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
                                        <div :style="{ 'background-color': '#' + hasHeroObject()?.bgColor ?? '' }"
                                             class="svg-icon"></div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="artworkContainer" v-if="data.attributes.artwork != null && !hasHero()">
                    <artwork-material :url="data.attributes.artwork.url" size="500" images="1"></artwork-material>
                </div>
                <button class="md-btn md-btn-small editTracksBtn"
                        v-if="(data.attributes.canEdit && data.type == 'library-playlists')"
                        @click="editing = !editing">
                    <span v-if="!editing">
                        <div class='codicon codicon-edit'></div> {{$root.getLz("action.editTracklist")}}
                    </span>
                    <span v-else>
                        <div class='codicon codicon-check'></div> {{$root.getLz("action.done")}}
                    </span>
                </button>
            </div>
            <div class="floating-header"
                 :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
                <div class="row">
                    <div class="col">
                        <h3>{{data.attributes ? (data.attributes.name ??
                            (data.attributes.title ?? '') ?? '') : ''}}</h3>
                    </div>
                    <div class="col-auto cider-flex-center">
                        <div>
                            <button class="md-btn md-btn-primary  md-btn-icon" style="min-width: 100px;"
                                    @click="app.mk.shuffleMode = 0; play()"><img class="md-ico-play">
                                {{app.getLz('term.play')}}
                            </button>
                            <button class="md-btn md-btn-primary  md-btn-icon" style="min-width: 100px;"
                                    @click="app.mk.shuffleMode = 1;play()"><img class="md-ico-shuffle">
                                {{app.getLz('term.shuffle')}}
                            </button>
                            <button class="md-btn md-btn-icon" style="min-width: 180px;"
                                    v-if="inLibrary!=null && confirm!=true"
                                    @click="confirmButton()"><img
                                        :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                {{ (!inLibrary) ? app.getLz('action.addToLibrary') :
                                app.getLz("action.removeFromLibrary") }}
                            </button>
                            <button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
                                <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                {{app.getLz('term.confirm')}}
                            </button>
                            <select v-if="shouldPaginate" class="md-select" v-model="prefs.scroll">
                                <optgroup :label="app.getLz('term.scroll')">
                                    <option value="infinite">{{app.getLz('term.scroll.infinite')}}</option>
                                    <option value="paged">{{app.getLz('term.scroll.paged').replace("${songsPerPage}",
                                        pageSize)}}
                                    </option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="col-auto cider-flex-center">
                        <button class="more-btn-round" style="float:right;" @click="menu"
                                :aria-label="app.getLz('term.more')">
                            <div class="svg-icon"></div>
                        </button>
                    </div>
                </div>
            </div>
            <div class="playlist-body scrollbody">
                <b-tabs pills class="track-pills pilldim fancy-pills" align="center" content-class="mt-3"
                        :nav-wrapper-class="navClass(data)">
                    <b-tab :title="$root.getLz('term.tracks')" id="songList" active>
                        <div @wheel="minClass(true)" @scroll="minClass(true)">
                            <div class="">
                                <div style="width:100%" @click="minClass(true)">
                                    <div v-if="showSearch" class="search-input-container">
                                        <div class="search-input--icon"></div>
                                        <input type="search"
                                               spellcheck="false"
                                               :placeholder="$root.getLz('term.search') + '...'"
                                               @input="search()"
                                               v-model="searchQuery"
                                               class="search-input"
                                               ref="search-bar">
                                    </div>
                                    <pagination
                                            v-if="shouldPaginate"
                                            style="margin-top: 10px"
                                            :length="hasNestedPlaylist ? nestedDisplayLength: displayListing.length"
                                            :pageSize="pageSize"
                                            :scroll="prefs.scroll"
                                            scrollSelector="#songList"
                                            @onRangeChange="onRangeChange"
                                    />
                                    <draggable :options="{disabled: !editing}"
                                               v-model="data.relationships.tracks.data" @start="drag=true"
                                               @end="drag=false;put()">
                                        <template v-if="!hasNestedPlaylist">
                                            <mediaitem-list-item :item="item" :parent="getItemParent(data)"
                                                                 :index="index + start"
                                                                 :showIndex="true"
                                                                 :showIndexPlaylist="(data.attributes.playParams?.kind ?? data.type ?? '').includes('playlist')"
                                                                 :context-ext="buildContextMenu()"
                                                                 v-bind:key="item.id"
                                                                 v-for="(item,index) in currentSlice"></mediaitem-list-item>
                                        </template>
                                        <template v-else>
                                            <div v-for="disc in nestedSlices">
                                                <div class="playlist-time">{{($root.getLz("term.discNumber") ??
                                                    "").replace("${discNumber}",disc.disc)}}
                                                </div>
                                                <mediaitem-list-item :item="item" :parent="getItemParent(data)"
                                                                     :index="index"
                                                                     :showIndex="true"
                                                                     :showIndexPlaylist="(data.attributes.playParams?.kind ?? data.type ?? '').includes('playlist')"
                                                                     :context-ext="buildContextMenu()"
                                                                     v-bind:key="item.id"
                                                                     v-for="(item,index) in disc.tracks"></mediaitem-list-item>
                                            </div>

                                        </template>
                                    </draggable>

                                </div>

                            </div>
                            <div class="friends-info" v-if="itemBadges.length != 0">
                                <div class="well">
                                    <div class="badge-container">
                                        <div class="socialBadge"
                                             :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
                                             v-for="badge in itemBadges">
                                            <mediaitem-artwork
                                                    :url="badge.attributes.artwork.url"
                                                    :size="60"></mediaitem-artwork>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="playlist-time">
                                {{getFormattedDate()}}
                            </div>
                            <div class="playlist-time total">{{app.getTotalTime()}}</div>
                            <div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
                                 style="width: 50%;">
                                {{data.attributes.copyright}}
                            </div>
                            <template
                                    v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') &&  data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
                                <div class="playlist-time showExtended item-navigate"
                                     style="color:#fa586a; font-weight: bold"
                                     @click="app.routeView(data.relationships.catalog.data[0])">
                                    {{$root.getLz("action.showAlbum")}}
                                </div>
                            </template>
                        </div>
                    </b-tab>
                    <template v-if="typeof data.views != 'undefined'">
                        <b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order"
                               v-if="data.views[view].data.length != 0">
                            <div>
                                <div class="row">
                                    <div class="col">
                                        <h3>{{ data.views[view].attributes.title }}</h3>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <mediaitem-scroller-horizontal
                                                :items="data.views[view].data"></mediaitem-scroller-horizontal>
                                    </div>
                                </div>
                            </div>
                        </b-tab>
                    </template>

                </b-tabs>
            </div>
        </template>
    </div>

</script>

<script>
  Vue.component('cider-playlist', {
    template: "#cider-playlist",
    props: ["data"],

    data: function() {
      const pageSize = this.$root.cfg.libraryPrefs.pageSize;
      return {
        editorialNotesExpanded: false,
        drag: false,
        nameEditing: false,
        descriptionEditing: false,
        inLibrary: null,
        confirm: false,
        app: this.$root,
        itemBadges: [],
        badgesRequested: false,
        headerVisible: true,
        useArtistChip: false,
        nestedPlaylist: [],
        nestedDisplayLength: 0,
        classes: [],
        editing: false,
        inPlaylist: false,
        searchQuery: "",
        displayListing: [],
        hasNestedPlaylist: false,
        showSearch: false,
        pageSize: pageSize,
        start: 0,
        end: pageSize,
        prefs: this.$root.cfg.libraryPrefs.playlists
      }
    },
    mounted: function() {
      this.$nextTick(function() {
        if (this.data.id != "ciderlocal") {
          this.isInLibrary()
        } else {
          if (this.data.relationships != null && this.data.id == "ciderlocal") {
            this.displayListing = this.data.relationships.tracks.data
          }

          this.inPlaylist = this.data.type == "library-playlists";
        }
      })
    },
    beforeMount() {
      if (window.location.hash.includes("playlist")) {
        window.addEventListener('keydown', this.getCopiedPlayListSongs);
        window.addEventListener('keydown', this.pasteSongs);
      }
    },
    beforeDestroy() {
      if (window.location.hash.includes("playlist")) {
        window.removeEventListener('keydown', this.getCopiedPlayListSongs);
        window.removeEventListener('keydown', this.pasteSongs);
      }
    },
    watch: {
      data: {
        handler: function() {
          this.isInLibrary()
          this.getBadges()

          if (this.data.relationships != null) {
            if (this.data.id == "ciderlocal") {
              this.displayListing = this.data.relationships.tracks.data
            } else {
              this.generateNestedPlaylist(this.data.relationships.tracks.data)
              if (!this.hasNestedPlaylist) {
                this.displayListing = this.data.relationships.tracks.data
              }
            }
          }

          this.inPlaylist = this.data.type == "library-playlists";
        },
        deep: true
      }
    },
    computed: {
      currentSlice() {
        return this.displayListing.slice(this.start, this.end);
      },
      nestedSlices() {
        if (this.shouldPaginate) {
          let songsSeen = 0;
          const discs = [];

          for (const disc of this.nestedPlaylist) {
            songsSeen += disc.tracks.length;

            if (songsSeen >= this.end) {
              discs.push({
                disc: disc.disc,
                tracks: disc.tracks.slice(0, this.end + disc.tracks.length - songsSeen)
              })
              break;
            } else if (songsSeen > this.start) {
              discs.push({
                disc: disc.disc,
                tracks: disc.tracks.slice(this.start - songsSeen)
              })
            }
          }

          return discs;
        } else {
          return this.nestedPlaylist
        }
      },
      shouldPaginate() {
        const result = this.data.relationships.tracks.data.length > this.pageSize
        console.log(result)
        return result
      }
    },
    methods: {
      onRangeChange(newRange) {
        this.start = newRange[0];
        this.end = newRange[1];
      },
      isAlbum() {
        return (this.data.attributes?.playParams?.kind ?? this.data.type ?? '').includes('album')
      },
      minClass(val) {
        if (app.appMode == 'fullscreen') {
          return
        }
        if (val) {
          this.classes = ["plmin"]
        } else {
          this.classes = []
        }
      },
      openInfoModal() {
        app.moreinfodata = [];
        app.moreinfodata = {
          title: this.data?.attributes ? (this.data?.attributes?.name ??
            (this.data?.attributes?.title ?? '') ?? '') : '',
          subtitle: this.data?.attributes?.artistName ?? '',
          content: ((this.data?.attributes?.editorialNotes != null) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '')) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : ''))
        }
        app.modals.moreInfo = true;
      },
      generateNestedPlaylist(songlists) {
        this.nestedPlaylist = [];
        this.nestedDisplayLength = songlists.length;

        if (this.data?.type?.includes("album")) {
          let discs = songlists.map(x => {
            return x.attributes.discNumber
          }).filter((item, i, ar) => ar.indexOf(item) === i);

          if ((discs && discs.length > 1) || (discs && this.hasNestedPlaylist)) {
            for (disc of discs) {
              let songs = songlists.filter(x => x.attributes.discNumber == disc);
              this.nestedPlaylist.push({ disc: disc, tracks: songs })
            }
          }
          console.log(this.nestedPlaylist)
        }

        if (!this.hasNestedPlaylist)
          this.hasNestedPlaylist = this.nestedPlaylist != [] && this.nestedPlaylist.length > 1;
      },
      isHeaderVisible(visible) {
        this.headerVisible = visible
      },
      hasHero() {
        if (this.data.attributes?.editorialArtwork?.bannerUber) {
          return this.data.attributes?.editorialArtwork?.bannerUber.url
        } else if (this.data.attributes?.editorialArtwork?.subscriptionHero) {
          return this.data.attributes?.editorialArtwork?.subscriptionHero.url
        } else if (this.data.attributes?.editorialArtwork?.storeFlowcase) {
          return this.data.attributes?.editorialArtwork?.storeFlowcase.url
        }
        return false;
      },
      hasHeroObject() {
        if (this.data.attributes?.editorialArtwork?.bannerUber) {
          return this.data.attributes?.editorialArtwork?.bannerUber
        } else if (this.data.attributes?.editorialArtwork?.subscriptionHero) {
          return this.data.attributes?.editorialArtwork?.subscriptionHero
        } else if (this.data.attributes?.editorialArtwork?.storeFlowcase) {
          return this.data.attributes?.editorialArtwork?.storeFlowcase
        }
        return [];
      },
      getBadges() {
        return
        if (this.badgesRequested) {
          return
        }
        this.badgesRequested = true
        this.itemBadges = []
        let self = this
        var id = 0
        try {
          id = this.data.attributes.playParams.id
        } catch (e) {
          id = this.data.id
        }
        this.$root.getSocialBadges((badges) => {
          let friends = badges[id]
          if (friends) {
            friends.forEach(function(friend) {
              self.app.mk.api.v3.music(`/v1/social/${app.mk.storefrontId}/social-profiles/${friend}`).then(data => {
                self.itemBadges.push(data.data.data[0])
              })
            })
          }
        })
      },
      confirmButton() {
        // Return button to normal state after 3 seconds

        this.confirm = true
        setTimeout(() => this.confirm = false, 3000);
      },
      getArtistName(data) {
        if (data.attributes.artistName) {
          this.useArtistChip = true
          return data.attributes.artistName
        } else if (data.attributes.artist) {
          this.useArtistChip = true
          return data.attributes.artist.attributes.name
        } else if (data.attributes.curatorName) {
          return data.attributes.curatorName
        } else {
          return ""
        }
      },
      getAlbumGenre: function() {
        if (this.data.type.includes('albums')) {
          let date = this.data.attributes.releaseDate;
          if (date == null || date === "") return "";
          return `${this.data.attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
        }
      },
      async isInLibrary() {
        if (this.data.type && !this.data.type.includes("library")) {
          // please keep using vars here
          const params = {
            "fields[playlists]": "inLibrary",
            "fields[albums]": "inLibrary",
            "relate": "library"
          };
          const res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params);
          this.inLibrary = (res.data.data[0] && res.data.data[0].attributes && res.data.data[0].attributes.inLibrary) ? res.data.data[0].attributes.inLibrary : false
          console.log(res)
        } else {
          this.inLibrary = true
        }
      },
      editPlaylist() {
        this.app.editPlaylist(this.data.id, this.data.attributes.name);
        this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
        this.app.playlists.listing.forEach(playlist => {
          if (playlist.id === this.data.id) {
            playlist.attributes.name = this.data.attributes.name
            playlist.attributes.description = this.data.attributes.description.standard
          }
        })
        this.nameEditing = false
        this.descriptionEditing = false
      },
      editPlaylistDescription() {
        this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
        this.app.playlists.listing.forEach(playlist => {
          if (playlist.id === this.data.id) {
            playlist.attributes.description = this.data.attributes.description.standard
          }
        })
        this.descriptionEditing = false
      },
      addToLibrary(id) {
        app.mk.addToLibrary(id)
        this.inLibrary = true
        this.confirm = false
      },
      async removeFromLibrary(id) {
        const params = { "fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" };
        var id = this.data.id ?? this.data.attributes.playParams.id
        const res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params);
        if (res.data.data[0] && res.data.data[0].relationships && res.data.data[0].relationships.library && res.data.data[0].relationships.library.data && res.data.data[0].relationships.library.data.length > 0) {
          id = res.data.data[0].relationships.library.data[0].id
        }
        let kind = this.data.attributes.playParams.kind ?? this.data.type ?? '';
        const truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
        app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`, {},
          {
            fetchOptions: {
              method: "DELETE"
            }
          })
        this.inLibrary = false
        this.confirm = false
      },
      editPlaylistName() {
        if (this.data.attributes.canEdit && this.data.type === "library-playlists") {
          this.nameEditing = true
          setTimeout(() => {
            document.querySelector(".nameEdit").focus()
          }, 100)
        }
      },
      editPlaylistDescription() {
        if (this.data.attributes.canEdit && this.data.type === "library-playlists") {
          this.descriptionEditing = true
          setTimeout(() => {
            document.querySelector(".descriptionEdit").focus()
          }, 100)
        }
      },
      buildContextMenu(index) {
        let self = this
        if (!this.data.attributes.canEdit) {
          return
        }
        return {
          normal: [
            {
              icon: "./assets/feather/x-circle.svg",
              name: app.getLz('action.removeFromPlaylist'),
              action: () => {
                self.remove()
              }
            },
          ],
          multiple: [
            {
              icon: "./assets/feather/x-circle.svg",
              name: app.getLz('action.removeFromPlaylist'),
              action: () => {
                self.remove()
              }
            },
          ]
        }
      },
      async put() {
        if (!this.data.attributes.canEdit) {
          return
        }
        console.log('sds', this.convert())
        await app.mk.api.v3.music(
          `/v1/me/library/playlists/${this.data.attributes.playParams.id}/tracks`,
          {},
          {
            fetchOptions: {
              method: "PUT",
              body: JSON.stringify({
                data: this.convert()
              })
            }
          }
        )
      },
      async remove() {
        if (!this.data.attributes.canEdit) {
          return
        }
        // for each app.selectedMediaItems splice the items from the playlist
        for (let i = 0; i < app.selectedMediaItems.length; i++) {
          let item = app.selectedMediaItems[i]
          let index = this.data.relationships.tracks.data.findIndex(x => x.id == item.id)
          if (index > -1) {
            this.data.relationships.tracks.data.splice(index, 1)
          }
        }
        await this.put()
      },
      convert() {
        let pl_tracks = []
        for (let i = 0; i < this.data.relationships.tracks.data.length; i++) {
          pl_tracks.push({
            id: this.data.relationships.tracks.data[i].id,
            type: this.data.relationships.tracks.data[i].type
          })
        }
        return pl_tracks
      },
      getRecursive(url) {
        app.apiCall(app.musicBaseUrl + "/v1/me/library/playlists/p.V7VYlrDso6kkYY/tracks?offset=100", res => {
          this.data.relationships.tracks.data = this.data.relationships.tracks.data.concat(res.data.data)
          if (res.data.next) {
            this.getRecursive(res.data.next)
          }
        })
      },
      async menu(event) {
        let self = this
        let artistId = null

        if (typeof this.data.relationships.artists != "undefined") {
          artistId = this.data.relationships.artists.data[0].id
          if (this.data.relationships.artists.data[0].type == "library-artists") {
            artistId = this.data.relationships.artists.data[0].relationships.catalog.data[0].id
          }
        }

        let menuItems = {
          headerItems: [
            {
              "icon": "./assets/feather/heart.svg",
              "id": "love",
              "name": app.getLz('action.love'),
              "hidden": false,
              "disabled": true,
              "action": function() {
                app.love(self.data)
              }
            },
            {
              "icon": "./assets/feather/heart.svg",
              "id": "unlove",
              "active": true,
              "name": app.getLz('action.unlove'),
              "hidden": true,
              "action": function() {
                app.unlove(self.data)
              }
            },
            {
              "icon": "./assets/feather/thumbs-down.svg",
              "id": "dislike",
              "name": app.getLz('action.dislike'),
              "hidden": false,
              "disabled": true,
              "action": function() {
                app.dislike(self.data)
              }
            },
            {
              "icon": "./assets/feather/thumbs-down.svg",
              "id": "undo_dislike",
              "name": app.getLz('action.undoDislike'),
              "active": true,
              "hidden": true,
              "action": function() {
                app.unlove(self.data)
              }
            },
          ],
          items: {
            "addToPlaylist": {
              name: app.getLz('action.addToPlaylist'),
              "icon": "./assets/feather/list.svg",
              action: () => {
                app.selectedMediaItems = []
                app.select_selectMediaItem(this.data.attributes.playParams.id ?? this.data.id, this.data.attributes.playParams.kind ?? this.data.type, 0, 0, this.data.attributes.playParams.isLibrary ?? false)
                app.promptAddToPlaylist()
              }
            },
            "share": {
              name: app.getLz('term.share'),
              icon: "./assets/feather/share.svg",
              action: () => {
                let route = ""
                switch (this.data.type) {
                  case 'albums':
                    route = `/v1/catalog/${app.mk.storefrontId}/albums/${this.data.id}`
                    break;
                  case 'playlists':
                    route = `/v1/catalog/${app.mk.storefrontId}/playlists/${this.data.id}`
                    break;
                  case "library-playlists":
                    route = `/v1/me/library/playlists/${this.data.id}/catalog`
                    break
                  case "library-albums":
                    route = `/v1/me/library/albums/${this.data.id}/catalog`
                    break
                }
                if (route === '') {
                  return
                }
                app.mk.api.v3.music(route).then(res => {
                  console.log(res.data.data[0].attributes.url)
                  app.copyToClipboard(res.data.data[0].attributes.url)
                })
              }
            }
          }
        }
        app.showMenuPanel(menuItems, event)

        try {
          let rating = await app.getRating(self.data)
          if (rating == 0) {
            menuItems.headerItems.find(x => x.id == 'love').disabled = false
            menuItems.headerItems.find(x => x.id == 'dislike').disabled = false
          } else if (rating == 1) {
            menuItems.headerItems.find(x => x.id == 'unlove').hidden = false
            menuItems.headerItems.find(x => x.id == 'love').hidden = true
          } else if (rating == -1) {
            menuItems.headerItems.find(x => x.id == 'undo_dislike').hidden = false
            menuItems.headerItems.find(x => x.id == 'dislike').hidden = true
          }
        } catch (err) {
        }


      },
      getItemParent: function(data) {
        kind = data.attributes.playParams.kind;
        id = data.attributes.playParams.id;
        return `${kind}:${id}`
      },
      getFormattedDate: function() {
        let date = (this.data.attributes.releaseDate ?? (this.data.attributes.lastModifiedDate ?? (this.data.attributes.dateAdded ?? '')))
        let prefix = '';
        if (date == null || date === "") return "";
        switch (date) {
          case this.data.attributes.releaseDate:
            prefix = this.app.getLz('term.time.released') + ' '
            break;
          case this.data.attributes.lastModifiedDate:
            prefix = this.app.getLz('term.time.updated') + ' '
            break;
          case this.data.attributes.dateAdded:
            prefix = this.app.getLz('term.time.added') + ' '
            break;
        }
        let month, year;
        try {
          const releaseDate = new Date(date);
          // month = new Intl.DateTimeFormat(this.app.cfg.general.language.replace('_','-'), {month: 'long'}).format(releaseDate);
          // date = releaseDate.getDate();
          // year = releaseDate.getFullYear();
          let formatted = ''
          try {
            formatted = new Intl.DateTimeFormat(this.app.cfg.general.language?.replace('_', '-') ?? 'en-US', {
              day: 'numeric',
              month: 'long',
              year: 'numeric'
            }).format(releaseDate);
          } catch (e) {
            // use the format in json instead
            if (this.app.getLz('date.format') != null) {
              formatted = new this.app.getLz('date.format').replace("${d}", releaseDate.getDate()).replace("${m}", releaseDate.getMonth()).replace("${y}", releaseDate.getFullYear());
            } else {
              formatted = new Intl.DateTimeFormat('en-US', {
                day: 'numeric',
                month: 'long',
                year: 'numeric'
              }).format(releaseDate);
            }
          }
          return prefix + formatted
        } catch (e) {
          return ""
        }
      },
      play() {
        function shuffleArray(array) {
          for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
          }
        }

        const id = this.data.attributes.playParams?.id ?? this.data.id;
        //console.log("1")
        const kind = this.data.attributes.playParams?.kind ?? this.data.type ?? '';
        //console.log("1")
        if (kind == "podcast-episodes") {
          kind = "episode"
        }
        const truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;

        let query = (this.data ?? app.showingPlaylist).relationships.tracks.data.map(item => new MusicKit.MediaItem(item));

        app.mk.stop().then(() => {
          if (id != 'ciderlocal') {
            app.mk.setQueue({ [truekind]: [id], parameters: { l: app.mklang } }).then(function() {
              app.mk.play().then(function() {
                if (query.length > 100) {
                  let u = query.slice(100);
                  if (app.mk.shuffleMode == 1) {
                    shuffleArray(u)
                  }
                  app.mk.queue.append(u)
                }
              })
            })
          } else {
            let u = app.library.localsongs.map(i => {
              return i.id
            })
            app.mk.setQueue({ "episodes": u }).then(() => {
              app.mk.play()
            })
          }
        })


      },
      navClass(data) {
        if (data && typeof data.views != "undefined") return "";
        return "d-none";
      },
      async getCopiedPlayListSongs(event) {
        if (event.ctrlKey && event.keyCode === 67) {
          let urls = [];
          app.selectedMediaItems.forEach(item => {
            this.app.mk.api.v3.music(`/v1/me/library/songs/${item.id}`).then((response) => {
              this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/songs/${response.data.data[0].attributes.playParams.catalogId}`).then((response1) => {
                urls.push(response1.data.data[0].attributes.url)
                navigator.clipboard.writeText(urls)
              })
            })
          })
          notyf.success(app.getLz('term.share.success'))
        }
      },
      async pasteSongs(event) {
        if (event.ctrlKey && event.keyCode === 86 && this.data.attributes.canEdit) {
          let clipboard = await navigator.clipboard.readText()
          let songs = []

          clipboard = clipboard.split(",")
          clipboard.forEach(item => {
            songs.push({
              id: item.substring(item.indexOf("i=") + 2, item.length),
              type: "songs",
            })
          })

          this.app.mk.api.v3.music(`/v1/me/library/playlists/${this.data.id}/tracks`, {}, {
            fetchOptions: {
              method: "POST",
              body: JSON.stringify({
                data: songs
              })
            }
          }).then((response) => {
            songs.forEach(item => {
              this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/songs/${item.id}`).then((response1) => {
                this.displayListing.push(response1.data.data[0])
              })
            })
          })
        }
      },
      toggleSearch() {
        this.showSearch = !this.showSearch;

        if (!this.showSearch && this.searchQuery != "") {
          // Clear search query if the search bar becomes hidden
          this.searchQuery = "";
          this.search();
        } else if (this.showSearch) {
          // Focus search bar
          this.$nextTick(() => {
            this.$refs["search-bar"].focus();
          });
        }
      },
      search() {
        let filtered = [];

        if (this.searchQuery == "") {
          filtered = this.data.relationships.tracks.data;
        } else {
          filtered = this.data.relationships.tracks.data.filter((item) => {
            let itemName = item.attributes.name.toLowerCase();
            let searchTerm = this.searchQuery.toLowerCase();
            let artistName = "";
            let albumName = "";
            if (item.attributes.artistName != null) {
              artistName = item.attributes.artistName.toLowerCase();
            }
            if (item.attributes.albumName != null) {
              albumName = item.attributes.albumName.toLowerCase();
            }

            // remove any non-alphanumeric characters and spaces from search term and item name
            searchTerm = searchTerm.replace(/[^\p{L}\p{N} ]/gu, "");
            itemName = itemName.replace(/[^\p{L}\p{N} ]/gu, "");
            artistName = artistName.replace(/[^\p{L}\p{N} ]/gu, "");
            albumName = albumName.replace(/[^\p{L}\p{N} ]/gu, "");

            let match = itemName.includes(searchTerm) || artistName.includes(searchTerm);
            // only include album name in playlists
            // this allows to search for the title track (itemName == albumName)
            if (this.inPlaylist) match = match || albumName.includes(searchTerm)

            if (match) return item;
          });
        }

        if (!this.hasNestedPlaylist) {
          // Regular album/playlist
          this.displayListing = filtered;
        } else {
          // Album with multiple discs
          this.generateNestedPlaylist(filtered);
        }
      }
    }
  })
</script>
